/********** @name: depart科室选择组件 @describtion: @author:liubingye @date:2023-03-03 11:18:10 ***********/
<template>
  <el-form-item class="ruifox-depart expand-form-item" :label="props.title" :prop="props.field">
    <el-cascader v-model="value" :options="treeData" :props="treeProps" :show-all-levels="false" multiple popper-class="pid-cascader" placeholder="选择科室"></el-cascader>
  </el-form-item>
</template>

<script setup>
import { computed, reactive } from "vue"
import { useStore } from "vuex"

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  value: {
    type: Array,
    default: () => [],
  },
  field: {
    type: String,
    default: "",
  },
  children: {
    type: Array,
    default: () => [],
  },
  childrenShow: {
    type: Boolean,
    default: false,
  },
  setting: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['update:value'])
const store = useStore()
const value = computed({
  get: () => {
    return props.value
  },
  set: (val) => {
    emits('update:value', val)
  }
})

const treeData = computed(() => store.state.category.categoryTree)
const treeProps = reactive({
  label: 'name',
  value: 'id',
  children: 'children',
  checkStrictly: true,
  expandTrigger: 'hover',
  emitPath: false
})
</script>

<style scoped lang="scss">
.ruifox-depart {
  width: 100%;
}
</style>
